// 获取tbody 标签
const tb = document.querySelector('tbody')
// 获取省市区下拉列表
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const county = document.querySelector('[name="county"]')
const form = document.querySelector('form')
const addBtn = document.querySelector('.modal-dialog-centered')
const title = document.querySelector('#addModalLabel')
// 全局声明一个id 
let id

// 渲染学员数据
async function rander () {
  // 获取全部学员信息
  const result = await axios({
    url: '/student/list',
  })
  // console.log(result.data.data)
  const html = result.data.data.reduce((getSum, value) => {
    // 解构数组里面数据
    const { id, name, age, sex, group, phone, salary, truesalary, province, city, county, } = value
    return getSum + `
    <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id="${id}">删除</button>
        </td>
      </tr>`
  }, '')
  tb.innerHTML = html
}

// 封装省市县下拉获取事件
async function getSelect (url, params, text, target) {
  const result = await axios({
    url,
    params
  })
  // console.log(result.data)
  const html = result.data.reduce((getSum, value) => {
    return getSum + `
    <option value="${value}">${value}</option>`
  }, `<option selected value="">--${text}--</option>`)

  target.innerHTML = html
}
// 初始化 省市区 列表数据
async function getprovince () {

  getSelect('/geo/province', {}, '省', province)
}
// 当 省 下拉框发生改变时触发事件
province.addEventListener('change', async function () {
  const pname = province.value
  // 手动把县下拉框清空
  county.innerHTML = '<option selected value="">--县--</option>'
  // county.innerHTML = county.firstChild.outerHTML
  // 更新县的下拉框
  getSelect('/geo/city', { pname }, '市', city)
})
// 当 市 下拉框发生改变时触发事件
city.addEventListener('change', async function () {
  const pname = province.value
  const cname = city.value
  // 更新县的下拉框
  getSelect('/geo/county', { pname, cname }, '县', county)
})
// 表单提交事件
form.addEventListener('submit', async function (e) {
  // 阻止默认提交行为
  e.preventDefault()

  // form-serialize插件 
  // hash 是把获取到表单变成对象形式
  // empty 是把空数据也放进数据里面
  const data = serialize(form, { hash: true, empty: true })
  // console.log(data)
  // 判断是否有空的表格没填
  for (const key in data) {
    // let isok = true
    if (!data[key]) {
      toastr.error('注意表单填写是否完整', "提示")
      return
    }
  }
  let result
  // 判断标题是'录入新学员'还是'修改学员信息'
  // 分别执行添加还是修改操作
  if (title.innerText === '录入新学员') {
    result = await axios({
      url: '/student/add',
      method: 'post',
      data
    })
  } else if (title.innerText === '修改学员信息') {
    data.id = id
    result = await axios({
      url: '/student/update',
      method: 'put',
      data
    })
  }

  // console.log(result)
  // 判断是否添加成功
  if (result.data.code === 0) {
    // 弹窗提示 成功信息
    toastr.success(result.data.message, "成功")
    // jQuery 关闭模态框
    $('#addModal').modal('hide')
    form.reset()//重置表单
    // 手动重置市和县的下拉框
    city.innerHTML = city.firstChild.outerHTML
    county.innerHTML = county.firstChild.outerHTML

    // 渲染数据
    rander()
  }
})
// 打开模态框时候执行操作
addBtn.addEventListener('click', function (e) {
  title.innerHTML = '录入新学员'
  // 打开模态框清空里面信息
  form.reset()//重置表单
  // 手动重置市和县的下拉框
  city.innerHTML = city.firstChild.outerHTML
  county.innerHTML = county.firstChild.outerHTML
})
// 给tbody 添加事件委托
tb.addEventListener('click', async function (e) {
  // 判断获取是否点击修改按钮
  if (e.target.classList.contains('btn-primary')) {
    // 修改模态框标题
    title.innerHTML = '修改学员信息'
    $('#addModal').modal('show')
    // 给全局id 赋值
    id = e.target.dataset.id
    const result = await axios({
      url: '/student/one',
      params: {
        id
      }
    })
    // console.log(result.data.data)

    const obj = result.data.data
    // 更新市和县下拉列表
    await getSelect('/geo/city', { pname: obj.province }, '市', city)
    await getSelect('/geo/county', { pname: obj.province, cname: obj.city }, '县', county)
    // 通过forin 遍历对象，给form 表单填充数据
    for (const key in obj) {
      // 循环获取模态框里面的文本框
      const formEle = document.querySelector(`[name="${key}"]`)
      // 判断是否获取到文本框 
      // 有些数据是没有文本框 例如：uesr_id,他们就不能执行该操作
      // 性别单选框不能执行第一个判断条件里面
      if (formEle && key !== "sex") {
        formEle.value = obj[key]
      } else if (key === "sex") {
        // 通过获取到数据里面是'男'还是'女'，获取那个单选框并且选中
        document.querySelector(`[name="${key}"][value="${obj[key]}"]`).checked = true
      }
    }
  }
  // 判断获取是否点击删除按钮
  else if (e.target.classList.contains('btn-danger')) {
    // 获取藏在删除按钮里面id
    const num = e.target.dataset.id
    // 防止用户进行误删，对用户进行再次询问
    if (confirm("确定是否删除吗")) {
      const result = await axios({
        url: '/student/delete',
        method: 'delete',
        params: {
          id: num
        }
      })
      // 返回一个成功tip 
      toastr.success(result.data.message, '成功')
      // 渲染页面
      rander()
    }
  }
})

rander()
getprovince()